<template>
  <div class="header-wrapper">
    <el-header class="d-flex">
      <div class="hamburger d-center" @click="toggle">
        <i :class="hide == true ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
      </div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item class="bold" v-for="(item, i) in breadList" :key="i">{{ item }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="account-wrapper d-center" style="width: 210px">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ this.$store.state.username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
  </div>
</template>

<script>
import Bus from "@/utils/eventBus";

export default {
  name: "Header",
  props: ["breadList"],
  data() {
    return {
      breadList: this.$store.state.breadList,
    };
  },
  mounted() {
    Bus.$on("changeBread", (data) => {
      this.$set(this.breadList, 0, data[0]);
      this.$set(this.breadList, 1, data[1]);
    });
  },
  methods: {
    toggle() {
      this.isCollapse = !this.isCollapse;
      this.hide = !this.hide;
    },
    logout() {
      this.$store.commit("Logout");
      if (this.$store.state.token) return this.$message("退出失败");

      this.$router.push("/login");
      this.$message.success("退出成功");
    },
  },
};
</script>

<style lang="scss">
.header-wrapper {
  .account-wrapper {
    margin-left: auto;
  }
}
</style>
